<script setup lang="ts"></script>

<template>
  <div class="container">
    <div class="content-wrapper">
      <div class="title">全场景语音2.0</div>
      <div class="subtitle">全车全时</div>
      <div class="description">免唤醒，可同时服务四个人</div>
      <div class="subtitle">极速对话</div>
      <div class="description">毫秒级响应，说到即做到</div>
      <div class="subtitle">无网络对话</div>
      <div class="description">无网/弱网支持全车600+功能使用</div>
    </div>

    <img
      alt=""
      src="https://s.xiaopeng.com/xp-fe/mainsite/2023/p7i/p14-1.jpg"
      class="img"
    />
  </div>
</template>

<style scoped>
.container {
  padding: 14rem 0;
  display: flex;
  align-items: center;
  justify-content: center;

  .content-wrapper {
    margin-left: 8rem;
    width: 60rem;

    .title {
      font-size: 3.2rem;
      letter-spacing: 0.4rem;
      margin-bottom: 3.2rem;
    }

    .subtitle {
      margin-bottom: 0.8rem;
      font-size: 1.6rem;
      font-weight: ß;
      line-height: 1.3;
      letter-spacing: 0.2rem;
    }

    .description {
      margin-bottom: 2.4rem;
      font-size: 1.6rem;
      line-height: 2.8rem;
      letter-spacing: 0.2rem;
      color: #666;
    }
  }

  .img {
    width: 64rem;
    height: 48rem;
    border-radius: 0.4rem;
    object-fit: cover;
  }
}
</style>
